﻿
@{
    ViewBag.Title = "Index";
}
<section class="Hui-article-box">
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span> 系统管理
        <span class="c-gray en">&gt;</span> 用户管理
        <a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新">
            <i class="Hui-iconfont">&#xe68f;</i>
        </a>
    </nav>
    <div class="pd-20">
        <div class="text-c">
            <input type="text" class="input-text" style="width:250px" id="txt_Name" placeholder="输入管理员名称">
            <button type="submit" class="btn btn-success" id="btn_Search"><i class="Hui-iconfont">&#xe665;</i> 搜索用户</button>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l">
                <a href="javascript:;" id="deleteBatch" class="btn btn-danger radius">
                    <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
                </a>
                <a href="javascript:;" onclick="goEdit('添加用户','@Url.Action("Create","AdminUsers")?id=0','800', '500')" class="btn btn-primary radius">
                    <i class="Hui-iconfont">&#xe600;</i> 添加用户
                </a>
            </span>
        </div>
        <table id="tb_UserList" class="table table-border table-bordered table-bg">
            <thead>
                <tr>
                    <th scope="col" colspan="7">管理员列表</th>
                </tr>
                <tr class="text-c">
                    <th width="25"><input type="checkbox" name="" value=""></th>
                    <th width="200">管理员</th>
                    <th width="200">手机</th>
                    <th width="300">邮箱</th>
                    <th width="200">城市</th>
                    <th width="200">操作</th>
                </tr>
            </thead>
        </table>
    </div>
</section>

@section footScript
{
    <script src="~/Content/h-ui/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
    <script>
        $(function () {
            $("#admin").parent().parent().prev().addClass("selected");
            $("#admin").parent().parent().css("display", "block");
            $("#admin").addClass("current");

            getData();

        });

        //获取分页数据,通过datatalbe渲染列表
        var table;
        function getData() {
            //初始化查询参数
            var params = {};
            var table = $("#tb_UserList").DataTable({
                info: false, //是否显示情报 就是"当前显示1/100记录"这个信息
                pagingType: "full_numbers",//显示首页尾页
                processing: true, //显示加载中提示....
                ordering: false,//是否排序
                paging: true,//是否显示分页
                searching: false,//是否显示默认的搜索
                //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
                columns: [
                    { data: 'Id' },
                    { data: 'Name' },
                    { data: 'PhoneNum' },
                    { data: 'Email' },
                    { data: 'CityName' },
                    {
                        data: 'Id',
                        render: function (data, type, full, callback) {
                            return (' <a title="编辑" href="javascript:;" data-id=' + data + ' class="ml-5 edit"  style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a> <a title="删除"  href="javascript:;"  data-id=' + data + ' class="ml-5 delete" style="text-decoration:none"> <i class="Hui-iconfont">&#xe6e2;</i></a>   ')
                        }
                    }
                ],
                createdRow: function (row, data, index) {
                    /* 设置表格中的内容居中 */
                    $('td', row).attr("class", "text-c");
                },
                //开启服务器模式
                serverSide: true,
                //使用ajax异步请求
                ajax: {
                    type: 'POST',
                    url: '@Url.Action("GetList", "AdminUsers")',
                    data: function (d) {
                        params.start = d.start;//开始的序号
                        params.length = d.length;//要取的数据的条数
                        params.name= $("#txt_Name").val();//输入的关键字
                        return params;//自定义需要传递的参数。
                    }
                },
                //自定义列
                columnDefs: [{
                    targets: 0,
                    render: function (data, type, row, meta) {
                        return '<input type="checkbox" value="' + row.Id + '" name="selectIDs">';
                    }
                }
                    // { "orderable": false, "targets": 4 },
                ]
            });
        }


        //编辑
        function goEdit(title, url, w, h) {
            layer_show(title, url, w, h);
        }

        //搜索
        $("#btn_Search").click(function () {
            //使datatable重新请求
            table.ajax.reload();

        });

        //修改
        $('.edit').livequery('click', function () {
            var id = $(this).attr("data-id");
            layer_show("修改管理员", "@Url.Action("Edit", "AdminUsers")?id=" + id, 800, 500)
            return false;
        });

        //删除
        $(".delete").livequery('click', function () {
              var id = $(this).attr("data-id");
            layer.confirm('确认删除该数据？', { icon: 3, title: '提示' }, function (index) {
                $.post("@Url.Action("Delete", "AdminUsers")", { id: id }, function (data) {
                    if (data.State == 1) {
                        location.reload();
                    } else {
                        layer.msg(data.ErrorMessage, { icon:2 });
                    }
                })
            });
        });

        //批量删除
        $("#deleteBatch").click(function () {
             var ids = [];
            $(":checkbox[name='selectIDs']:checked").each(function () {
                var id = $(this).val();
                ids.push(id);
            })
            if (ids.length == 0) {
                layer.msg("请选择要删除的项");
                return;
            }
            layer.confirm("确认是否删除", { icon: 3, title: "删除提示" }, function () {
                $.post("@Url.Action("DeleteBatch", "AdminUsers")", { ids: ids }, function (data) {
                    if (data.State == 1) {
                        location.reload();
                    } else {
                        layer.msg(data.ErrorMessage, { icon: 2 });
                    }
                })
            })
        })

        //全选
        $("#checkall").click(function () {
            if (this.checked) {
                $("input[name='selectIDs']").prop('checked', true)
            } else {
                $("input[name='selectIDs']").prop('checked', false)
            }
        }
    );
    </script>
}